    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>扑克牌展开</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .wrap img{
                width: 200px;
                height: 300px;
            }
            .wrap{
                width: 300px;
                height: 3000px;
                margin: 100px auto;
                position: relative;
            }
            .wrap div{
                position: absolute;
                left: 0;
                top: 0;
                transform-origin: center bottom;
                transition: all 2s;
                box-shadow: 0 0 3px 0 rgba(23, 12, 204, 0.8);
            }
            .wrap div img{

            }
            .wrap:hover div:nth-child(1){
                transform: rotate(-65deg);
            }
            .wrap:hover div:nth-child(2){
                transform: rotate(-55deg);
            }
            .wrap:hover div:nth-child(3){
                transform: rotate(-45deg);
            }
            .wrap:hover div:nth-child(4){
                transform: rotate(-35deg);
            }
            .wrap:hover div:nth-child(5){
                transform: rotate(-25deg);
            }
            /*.wrap div:nth-child(6){*/
            /*    transform: rotate(-15deg);*/
            /*}*/
            /*}*/
            .wrap:hover div:nth-child(7){
                transform: rotate(15deg);
            }

            .wrap:hover div:nth-child(8){
                transform: rotate(25deg);
            }

            .wrap:hover div:nth-child(9){
                transform: rotate(35deg);
            }

            .wrap:hover div:nth-child(10){
                transform: rotate(45deg);
            }

            .wrap:hover div:nth-child(11){
                transform: rotate(55deg);
            }
            
            .wrap:hover div:nth-child(12){
                transform: rotate(65deg);
            }
            .wrap:hover div:nth-child(13){
                transform: rotate(75deg);
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <div class="box1"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box2"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box3"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box4"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box5"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box6"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box7"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box8"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box9"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box10"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box11"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box12"><img src="img/k-poke.jpg" alt=""></div>
        <div class="box13"><img src="img/k-poke.jpg" alt=""></div>
    </div>
    </body>
    </html>